
<div class="terrain-section{% unless section.settings.full_width %} page-width{% endunless %}" id="overview">
  <div class="top center">
     {%- if section.settings.name != blank -%}
     <div class="name"> {{ section.settings.name }}</div>
     {%- endif -%}
     {%- if section.settings.text != blank -%}
     <div class="text"> {{ section.settings.text }}</div>
     {%- endif -%}
     {%- if section.settings.richtext != blank -%}
     <div class="richtext"> {{ section.settings.richtext }}</div>
     {%- endif -%}
     <div class="botton">
       <div class="name_feature">
       {{ section.settings.feature_name_1 }}
       <div>{{ section.settings.feature_1 }}</div>
     </div>
     <hr/>
     <div class="name_feature">
       {{ section.settings.feature_name_2 }}
       <div>{{ section.settings.feature_2 }}</div>
     </div>
     </div>
  </div>
  <div class="bottom">
    <div class="swiper-father">
     <div class="swiper terrain-service-swiper">
       <div class="swiper-wrapper">
           {%- for block in section.blocks -%}
               <div class="{% if forloop.index0 == 0 %} animate__animated wow animate__fadeInLeftBig animate__slow li-first {% endif %} {% if forloop.index0 == 2 %} animate__animated wow animate__fadeInRightBig animate__slow li-first {% endif %} swiper-slide swiper-no-swiping" {{ block.shopify_attributes }}>
                   <div class="pc-banner image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                    style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | floor }}%;"
                   >
                   {%- if block.settings.image != blank and block.settings.html == blank -%}
                   <img
                       srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                       {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                       {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                       {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                       {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                       {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                       {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                       {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                       {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                       src="{{ block.settings.image | img_url: '1500x' }}"
                       sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                       alt="{{ block.settings.image.alt | escape }}"
                       loading="lazy"
                       width="{{ block.settings.image.width }}"
                       height="{{ block.settings.image.height }}"
                   >
                   {%- elsif block.settings.image == blank and block.settings.html != blank -%}
                   {{ block.settings.html  }}
                   {%- else -%}
                   {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                   {%- endif -%}
                   </div>
                   <div class="image_mobile image-with-text__media image-with-text__media--{{ block.settings.height }} gradient color-{{ block.settings.color_scheme }} global-media-settings {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                 {% if block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
                 >
                 <img srcset="
                   {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 710 -%}{{ block.settings.image_mobile | img_url: '710x' }} 710w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 1140 -%}{{ block.settings.image_mobile | img_url: '1140x' }} 1140w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 1200 -%}{{ block.settings.image_mobile | img_url: '1200x' }} 1200w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                   {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}" sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" data-src="{{ block.settings.image | img_url: '1500x' }}" loading="lazy" class="lazyload" alt="{{ block.settings.image_mobile.alt | escape }}" width="{{ block.settings.image_mobile.width }}" height="{{ block.settings.image_mobile.height }}">
                 </div>
               </div>
           {%- endfor -%}   
        </div>
    </div>
    <div class="swiper-scrollbar swiper-terrain"></div>
    </div>
  </div>
</div>



<script>
   var swiper = new Swiper(".terrain-service-swiper", {
     speed: 600,
     observeParents:true,
     scrollbar: {
           el: '.swiper-scrollbar.swiper-terrain',
           draggable: true,
           dragSize: 50,
     },
     breakpoints: {
       320: {
         slidesPerView: 1,
         spaceBetween: 20,
         noSwiping: false,
       },
       375: {
         slidesPerView: 1,
         spaceBetween: 20,
         noSwiping: false,
       },
       750: {
         slidesPerView: 1,
         spaceBetween: 20,
         noSwiping: false,
       },
       990: {
         slidesPerView: 3,
         spaceBetween: 20,
         noSwiping: false,
       },
       1280: {
         slidesPerView: 3,
         spaceBetween: 20,
         autoplay:false,
         noSwiping: true,
       },
       1440: {
         slidesPerView: 3,
         spaceBetween: 20,
         autoplay:false,
         noSwiping: true,
       }
   }
   });
</script>



{% schema %}
   {
     "name": "Terrain module",
     "tag": "section",
     "class": "terrain-module",
     "settings": [
       {
         "type": "html",
         "id": "name",
         "label": "Name"
       },
       {
         "type": "html",
         "id": "text",
         "label": "Text"
       },
       {
         "type": "richtext",
         "id": "richtext",
         "label": "Richtext"
       },
       {
         "type": "text",
         "id": "feature_name_1",
         "label": "Feature name"
       },
       {
         "type": "text",
         "id": "feature_1",
         "label": "Feature 1"
       },
       {
         "type": "text",
         "id": "feature_name_2",
         "label": "Feature name"
       }, {
         "type": "text",
         "id": "feature_2",
         "label": "Feature 2"
       },
       {
       "type": "checkbox",
       "id": "full_width",
       "label": "t:sections.video.settings.full_width.label",
       "default": false
       }
     ],
     "blocks": [
       {
         "type": "image",
         "name": "image",
         "settings": [
           {
             "type": "image_picker",
             "id": "image",
             "label": "Image"
           },
           {
             "type": "image_picker",
             "id": "image_mobile",
             "label": "Image mobile"
           },
           {
           "type": "html",
           "id": "html",
           "label": "html"
           }
         ]
       }
     ],
     "presets": [
       {
         "name": "Terrain module"
       }
     ]
   }
 {% endschema %}